<template>
    <section class="public-header-content" id="City-overview">
        <header>城市概况</header>
        <div class="content clearfix">
            <article class="City-overview-main-content" v-if="!cityDetailsNoDataShow">
                <h4>{{ this.$store.getters.get_EstateHouseDetails.cityName }}</h4>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>人口数量</th>
                            <th>本地家庭收入</th>
                            <th>安全指数</th>
                            <th>租房率</th>
                            <th>自有住房率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ isNull0(cityDetails.totalPeople, '万人') }}</td>
                            <td>{{ isNull0_USD(cityDetails.annualHomeIncomeLocal) }}</td>
                            <td>
                                <a-tooltip placement="top" title="全美平均值是100" class="top">
                                    {{ isNull0(cityDetails.safetyIndex) }}
                                </a-tooltip>
                            </td>
                            <td>{{ isNull0(cityDetails.rentalRate, '%') }}</td>
                            <td>{{ isNull0(cityDetails.homeOwnershipRate, '%') }}</td>
                        </tr>
                        <tr>
                            <td colspan="6" class="City-overview-well-known-university"><strong>知名大学：</strong>{{ isNull0(cityDetails.wellKnownUniversity) }}</td>
                        </tr>
                    </tbody>
                </table>

                <a-tabs defaultActiveKey="1">
                    <a-tab-pane tab="房价走势图" key="1">
                        <housePriceRentChart :typeId="1"></housePriceRentChart>
                    </a-tab-pane>
                    <a-tab-pane tab="租金走势图" key="2" >
                        <housePriceRentChart :typeId="2"></housePriceRentChart>
                    </a-tab-pane>
                </a-tabs>
            </article>

            <h5 style="text-align: center; padding: 15px;" v-if="cityDetailsNoDataShow">暂未查询到数据！</h5>

            <!--汇率走势图-->
            <ExchangeRateChart></ExchangeRateChart>
        </div>

        <p v-show="false">{{getEstateHouseDetails}}</p>
    </section>
</template>

<script>
    import housePriceRentChart from './HousePriceRentChart.vue';    //房价租金走势图
    import ExchangeRateChart from './ExchangeRateChart.vue'; //汇率走势图

    export default {
        data() {
            return {
                cityDetails: {},
                cityDetailsNoDataShow: false,//城市概况——判断是否有无数据
            }
        },
        computed: {
            //从state获取新房详情数据
            getEstateHouseDetails() {
                if(this.$store.getters.get_EstateHouseDetails){
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_EstateHouseDetails).length != 0){
                        //判断countryName是否为美国，如果是泰国、希腊的房源，则不展示城市概况里的指数数据table和房价、租金走势图表，只展示汇率图表
                        if(this.$store.getters.get_EstateHouseDetails.countryName){
                            if(this.$store.getters.get_EstateHouseDetails.countryName == '美国'){
                                this.cityDetailsNoDataShow = false;
                                //判断cityId是否为null，美国城市才执行下面的接口，泰国和希腊不用执行请求
                                if(this.$store.getters.get_EstateHouseDetails.cityId){
                                    //延时1s，否则会造成死循环，或者其他报错
                                    this.$nextTick(() => {
                                        //获取城市指数数据
                                        this.getCityIndexData();
                                    })
                                }
                            }else{
                                this.cityDetailsNoDataShow = true;
                            }
                        }
                    }
                }
                return this.$store.getters.get_EstateHouseDetails
            },
        },
        created() {},
        mounted() {
        },
        methods: {
            //获取城市指数数据
            getCityIndexData() {
                this.$get('/city/index/'+ this.$store.getters.get_EstateHouseDetails.cityId).then(res => {
                    if (res.status == 0) {
                        this.cityDetails = res.data;
                    } else {
                        console.log(res.msg);
                    }
                })
            },
        },
        components: {
            housePriceRentChart,    //房价租金走势图
            ExchangeRateChart,  //汇率走势图
        }
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        #City-overview {
            > .content {
                text-align: center;
                >.City-overview-main-content {
                    > h4 {
                        margin: 30px 0;
                    }
                    > .table {
                        margin: 30px 0;
                        border: 1px solid #dddddd;
                        width: 100%;
                        max-width: 100%;
                        thead {
                            background: #f9f9f9;
                            > tr {
                                > th {
                                    padding: 8px;
                                    text-align: center;
                                    vertical-align: middle;
                                    border: 1px solid #dddddd;
                                }
                            }
                        }
                        tbody {
                            > tr {
                                > td {
                                    text-align: center;
                                    vertical-align: middle;
                                    font-size: 14px;
                                    border: 1px solid #dddddd;
                                    padding: 8px;
                                }

                                > td.City-overview-well-known-university {
                                    text-align: left;
                                }
                            }
                        }
                    }
                    > .ant-tabs {
                        overflow: initial;
                    }
                }
            }
        }
    }
</style>
